<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="webkit" name="renderer"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, user-scalable=1" name="viewport"/>
    <title>个人中心 - 河南农业大学农业物资管理系统</title>
    <link rel="shortcut icon" href="../../../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../../css/fonts/font-icons.min.css">
    <link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../js/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../../css/jsherp.css">
    <link rel="stylesheet" href="../../../js/adminlte/css/skins/skin-blue-light2.css">
</head>
<body class="hold-transition fixed noscroll2 sidebar-mini ">
<div class="wrapper">

    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">个人中心</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <img class="profile-user-img img-responsive img-circle" src="../../../js/images/user.jpg" alt="User profile picture">
                            <h3 class="profile-username text-center">用户名称</h3>
                            <p class="text-muted text-center">用户角色</p>
                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>邮箱</b> <a class="pull-right">user@example.com</a>
                                </li>
                                <li class="list-group-item">
                                    <b>联系电话</b> <a class="pull-right">1234567890</a>
                                </li>
                                <li class="list-group-item">
                                    <b>注册时间</b> <a class="pull-right">2025-01-01</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#personal-info" data-toggle="tab">个人信息</a></li>
                            <li><a href="#security-settings" data-toggle="tab">安全设置</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="active tab-pane" id="personal-info">
                                <form class="form-horizontal" id="personalInfoForm">
                                    <input type="hidden" id="userId" name="id">
                                    <div class="form-group">
                                        <label for="loginName" class="col-sm-2 control-label">登录名称</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="loginName" name="loginName" placeholder="登录名称" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="username" class="col-sm-2 control-label">用户姓名</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="用户姓名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="userRole" class="col-sm-2 control-label">用户角色</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="userRole" name="userRole" placeholder="用户角色" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phonenum" class="col-sm-2 control-label">联系电话</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="phonenum" name="phonenum" placeholder="联系电话">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="position" class="col-sm-2 control-label">职位</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="position" name="position" placeholder="职位">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="description" class="col-sm-2 control-label">描述</label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control" id="description" name="description" placeholder="描述"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-primary" id="savePersonalInfo">保存修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="security-settings">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="inputOldPassword" class="col-sm-2 control-label">旧密码</label>
                                        <div class="col-sm-10 input-group">
                                            <input type="password" class="form-control" id="inputOldPassword" placeholder="旧密码">
                                            <span class="input-group-addon" onclick="togglePasswordVisibility('inputOldPassword', this)">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputNewPassword" class="col-sm-2 control-label">新密码</label>
                                        <div class="col-sm-10 input-group">
                                            <input type="password" class="form-control" id="inputNewPassword" placeholder="新密码">
                                            <span class="input-group-addon" onclick="togglePasswordVisibility('inputNewPassword', this)">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputConfirmPassword" class="col-sm-2 control-label">确认密码</label>
                                        <div class="col-sm-10 input-group">
                                            <input type="password" class="form-control" id="inputConfirmPassword" placeholder="确认密码">
                                            <span class="input-group-addon" onclick="togglePasswordVisibility('inputConfirmPassword', this)">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-primary">修改密码</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../js/jquery/jquery-1.12.4.min.js"></script>
<script src="../../../js/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../js/adminlte/js/app.min.js"></script>
<script src="../../../js/common/common.js"></script>
<script>
    $(document).ready(function() {
        // 加载用户信息
        loadUserInfo();

        // 保存个人信息
        $('#savePersonalInfo').on('click', function() {
            saveUserInfo();
        });

        // 保存密码
        $('#savePassword').on('click', function() {
            // 实现修改密码逻辑
        });
    });

    function loadUserInfo() {
        // 从session获取用户信息
        $.get('/user/getUserSession', function(res) {
            if (res.code === 200 && res.data.user) {
                let user = res.data.user;
                // 填充左侧信息栏
                $('.profile-username').text(user.username);
                $('.list-group-item:contains("邮箱") .pull-right').text(user.email);
                $('.list-group-item:contains("联系电话") .pull-right').text(user.phonenum);

                // 填充个人信息表单
                $('#userId').val(user.id);
                $('#loginName').val(user.loginName);
                $('#username').val(user.username);
                $('#phonenum').val(user.phonenum);
                $('#email').val(user.email);
                $('#position').val(user.position);
                $('#description').val(user.description);
                
                // 加载用户角色
                loadUserRole();
            }
        });
    }

    function loadUserRole() {
        $.get('/user/getUserRoleInfo', function(res) {
            if (res.code === 200 && res.data.roleName) {
                $('.text-muted.text-center').text(res.data.roleName);
                $('#userRole').val(res.data.roleName);
            }
        });
    }

    function saveUserInfo() {
        let formData = $('#personalInfoForm').serializeObject();
        $.ajax({
            url: '/user/updateUser?id=' + formData.id,
            type: 'POST',
            data: {
                info: JSON.stringify(formData)
            },
            success: function(res) {
                if (res.code === 200) {
                    alert('用户信息更新成功！');
                    loadUserInfo(); // 重新加载用户信息
                } else {
                    alert('更新失败：' + res.msg);
                }
            },
            error: function() {
                alert('请求失败，请稍后再试');
            }
        });
    }

    function togglePasswordVisibility(inputId, iconSpan) {
        const input = document.getElementById(inputId);
        const icon = iconSpan.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
</script>
</body>
</html>
